Web Page Design for Designers

 


 

 

The use of palettes cause a great deal of confusion with web page designers.

In response to many requests from the Web Page Design for Designers forum readers, here is a little enlightenment on the mysteries of indexed palettes to elaborate on the original mention on the Graphics and Palettes page.

I say a 'little' enlightenment because the principles involved 'usually' work but on PCs, depending on the graphics card and drivers, anything can happen!

What you see on this page depends on which colour depth your monitor is set to.

In 16-bit or 24-bit, all the images will look about right with only subtle differences.

If your monitor is set to 8-bits (256 colours), the results will vary from 'slightly dithered' to 'totally wrong'

What I have done is to put GIF files with different palettes on the same page. This is something I would advise you not to do, and you will see why.

Macintosh System Palette

This is the standard Macintosh System Palette saved as an 8-bit GIF file with its own palette.

Only two slots are reserved for the Macintosh interface - the White and Black. All the other colours are 're-mappable'.

How this palette looks on your screen will give an idea of how well your browser re-maps the colours. If you can see any dithering it is because the colour does not have a close equivalent in the 6x6x6 web palette.

Windows 95 Default Palette

This typical Windows 95 Palette starts with Black and ends with White. Again, this is saved as an 8-bit GIF file with its own palette.

The first and last ten colours in the palette are reserved by Windows and include the standard 16 VGA colours plus four extra SVGA colours, light yellow, light green, light blue and a mid grey. The other 236 colours are 're-mappable' to any colours you like.

This palette is not 'set in stone' like the Macintosh palette and is the default, out-of-the-box,Windows 95 palette. The default system palette may change if the user introduces a pictorial backdrop or opens any program or picture file that uses a different palette.

How this palette looks on your screen will give a good indication of how well your browser re-maps the colours. If you can see any dithering it is because the colour does not have a close equivalent in the 6x6x6 web palette.

Autumn Leaves - JPEGGreen Leaf - JPEGWinter Trees - JPEG

Three images were saved
in 24-bit JPEG format

I have chosen three images with completely different colour biases. The first set is saved in JPEG format so they are essentially 24-bit images.

If you are viewing them on an 8-bit display, your browser should make a fairly good job of dithering them down to 256 colours.

On a 16-bit or 24-bit monitor, they will look photographic.

They have been saved at 'Medium' compression and are slightly smaller in file size than the following GIFs.

Autumn Leaves - GIFGreen Leaf - GIFWinter Trees - GIF

These images are mapped to
the 6x6x6 web palette

This set of images has been saved as GIFs using the '6x6x6' web palette which is Netscape's 'System' palette. If you are using 8-bit GIFs and map them all to this palette, there will be no surprises on Mac or PC screens.

The results should be virtually indistinguishable from the JPEG images above in 8-bits except for a slight 'blocking-in' on the red leaves.

In 16-bit or 24-bit colour, they will look exactly the same!

Autumn Leaves Adaptive - GIFGreen Leaf Adaptive - GIFWinter Trees Adaptive - GIF

On a 16-bit or 24-bit screen, these
'adaptive palette' images will look better than
their 6x6x6 palette counterparts
but they may look worse in 8-bits because of
'double-dithering' or video card problems

Each of these images has been saved with its own 'adaptive' palette.

Normally, these three images would not co-exist on the same 8-bit screen. If each was in a separate window, the one in the foreground would be very close to a 24-bit version of the same image whilst the two behind would be severely compromised.

Both Netscape and Internet Explorer re-map these conflicting paletted images to their own palettes and, whilst they lose some subtlety of shading, are reasonably acceptable because of their undemanding subject nature. More critical images with solid logo colours or flesh tones would be more noticeably wrong or severely dithered..

For some images, the use of adaptive palettes will give better results in 8-bits than if the 6x6x6 palette is used. Some people suggest the use of GIF images using adaptive palettes with LESS than 8-bits to reduce files size - and in most cases this trick works very well.

The best advice that I can give is to try all the different methods and use the one which works best for your set of images.

The 6x6x6 Web Palette mentioned

can be downloaded here in the form

of a Photoshop .act palette file.

Put this in the Color Palettes

folder in the Goodies folder inside

your Photoshop folder and open it

through the Color Table dialog

you get when you select 'Custom'

in the Indexed Color menu

Mac WebAct.sit.hqx     PC WebAct.zip

My PowerMac 8500 with a 17" Radius PrecisionColor display is very forgiving and, apart from a slight dithering of the Windows palette image, everything else looks acceptable in 8-Bits in Netscape 3.01 and excellent in Microsoft Internet Explorer 3.01 with hardly a hint of dithering

On my two PCs, it's a different story. On the New Pentium 166 machine with a Diamond Stealth 3000 video card and the latest drivers, ALL the solid colours on this page are noticeably dithered in 8-bit mode, but fine in 16-bit and 24-bit.

My old 486 with its on-board graphics chip and Windows 3.11 displays many of the colours incorrectly.


 

menunext